<template>
  <div class="box">
    <div class="middle">
      <img src="../assets/sign.png" alt="">
      <div class="div1">文件哈希核验</div>
      <br>
      <div class="div2">{{ info }}</div>
      <br>
      <div class="div3">
        <strong>文件哈希</strong>
        <br>
        <input placeholder="请输入文件哈希" v-model="searchContent">
        <br>
        <button @click="search">查询</button>
      </div>
    </div>
    <div class="tabOfHash">
      <table border="1px" cellpadding="10">
        <tr>
          <th class="name">名称</th>
          <th class="content">值</th>
        </tr>
        <tr>
          <td>著作权人链上地址</td>
          <td>{{ copyrightOwnerAddress }}</td>
        </tr>
        <tr>
          <td>ipfs文件位置</td>
          <td>{{ workuri }}</td>
        </tr>
        <tr>
          <td>著作权人姓名</td>
          <td>{{copyrightOwnerName }}</td>
        </tr>
        <tr>
          <td>著作权人证件号</td>
          <td>{{ copyrightOwnerId}}</td>
        </tr>
        <tr>
          <td>授权列表</td>
          <td>{{ copyrightOwnerList }}</td>
        </tr>
      </table>
    </div>
  </div>

</template>

<script>
/* eslint-disable no-unused-vars */

import confluxPortal from "@/conflux/conflux-portal";
const {Drip} = require("js-conflux-sdk");
import {ElMessage} from "element-plus";
// eslint-disable-next-line no-unused-vars
import {ContractCopyright, ContractCopyrightSystemTransactions, ContractHnuCoin} from "@/conflux/conflux";

export default {
  name: 'VerificateOnChain1',
  data() {
    return {
      account:'',
      copyrightOwnerAddress: '暂无数据',
      workuri: '暂无数据',
      copyrightOwnerName: '暂无数据',
      copyrightOwnerId: '暂无数据',
      copyrightOwnerList: '暂无数据',
      info: '文件哈希值是由您上传的作品文件而得，它作为您版权信息的唯一标识，可用于与智能合约进行交互获取你在链上所存储的信息',
      searchContent: ''
    }
  },
  methods: {
     async search() {
       try {
         this.copyrightOwnerAddress = await ContractCopyright.contract.ownerOf(this.searchContent);
         this.workuri=await ContractCopyright.contract.workURI(this.searchContent);
         this.copyrightOwnerList=await ContractCopyright.contract.workdownloaders(this.searchContent);
         this.copyrightOwnerName=await ContractCopyright.contract.workOwnername(this.searchContent);
         this.copyrightOwnerId=await ContractCopyright.contract.workOwnerid(this.searchContent);
         ElMessage({
           message:"查询成功",
           type:'success'
         })
       }catch (e){
         ElMessage({
           message:"无数据",
           type:'success'
         })
       }
     }
  }
}
</script>

<style scoped>
.box {
  border: 0px;
  margin: 50px auto;
  height: 700px;
  width: 1600px;
  border-radius: 20px;
}

img {
  float: left;
  width: 30px;
  margin-left: 50px;
}

.middle .div1 {
  float: left;
  margin-left: 20px;
  margin-top: 5px;
}

.middle .div2 {
  margin-left: 100px;
  margin-top: 20px;
  color: gray;
}

.middle .div3 {
  margin-left: 100px;
  margin-top: 60px;
}

.div3 input {
  margin: 10px 0;
  width: 800px;
}


.tabOfHash {
  margin-left: 100px;
  margin-top: 30px;
  font-size: 20px;

}

.tabOfHash th {
  background-color: grey;
}

.tabOfHash .name {
  width: 250px;
}

.tabOfHash .content {
  width: 750px;
}
</style>
